<template>
    <div class="fixed_nav">
        <ul>
            <li @click="save" v-show="saveFlag==='0'">
                <img src="../../../../assets/img/save@2x.png" alt="">
                <span>暂存</span>
            </li>
            <li @click="downloadFile">
                <img src="../../../../assets/img/write@2x.png" alt="">
                <span>合同下载</span>
            </li>
            <li @click="tagConsult">
                <img src="../../../../assets/img/consult@2x.png" alt="">
                <span>咨询</span>
                <div class="login-qr-box" v-show="isShowConsult">
                    <div class="login-qr">
                        <div>
                            <span style="font-size:14px;color:#333333">客服电话</span>
                            <p style="border-bottom: 1px solid #D8D8D8;margin:2px 0 10px;padding-bottom: 10px;"><span style="color:#666;margin-top: 4px;">400-6527-606</span> <span style="color:#999">( 8:30-17:30 )</span></p>
                        </div>
                        <span style="font-size:14px;color: #333;"> 客服QQ </span>
                        <div class="qr">
                            <img src="../../../../assets/img/qq_apply@2x.png" style="display: block;">
                        </div>
                        <div class="qr-title" style="padding-top: 0;text-align: center;">
                            <span style="font-size:12px">QQ:1001001000</span>
                        </div>
                        <div class="qq-btn" style="text-align: center;">
                            <Button type="primary">立即QQ咨询</Button>
                        </div>
                    </div>
                </div>
            </li>
            <li>
                <a href="javascript:scrollTo(0,0);"><img src="../../../../assets/img/up@2x.png" alt="">置顶</a>
            </li>
        </ul>
    </div>

</template>
<script>

export default {
    props:["saveFlag","showSave"],
    data(){
        return {
            isShowConsult:false,
        }
    },
    methods:{
        save(){
            this.$emit('save','temp')
        },
        downloadFile(){
            this.$emit('downloadFile')
        },
        tagConsult(){
            this.isShowConsult = !this.isShowConsult
        },
    }

}
</script>
<style scoped lang="less">
.fixed_nav{
    width: 45px;
    background-color: #EE9820;
    border-radius: 30px;
    position: fixed;
    right: 20px;
    bottom: 100px;
    padding: 20px 10px;
}
.fixed_nav ul li{
    margin-bottom: 10px;
    color: white;
    cursor: pointer;
    position: relative;
}
.fixed_nav ul li:last-child{
    margin:0;
}
.fixed_nav ul li img{
    width: 25px;
}
.fixed_nav ul li>span{
    display: block;
}
.fixed_nav ul li a{
    height: 100%;
    color:white;
}
.fixed_nav  .login-qr  .qr , .fixed_nav  .login-qr img{
    margin: auto;
    width: 100px;
    height: 100px;
}
.fixed_nav .login-qr{
    padding:15px;
    width: 200px;
    background: #FFFBF5;
    border: 2px solid #EB9620;
    border-radius: 4px;
}
.fixed_nav  .login-qr-box {
    position: absolute;
    will-change: top, left;
    top: 0;
    left: 0;
    transform: translate(-100%,-50%);
    margin-left: -35px;
    transition: all .5s linear;
    z-index: 100;
}
.fixed_nav  .login-qr-box::before {
    content:'';
    display: block;
    position: absolute;
    border: 8px solid transparent;
    border-left-color: #FFFBF5;
    right: -15px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 12;
}
.fixed_nav  .login-qr-box::after {
    content: '';
    display: block;
    position: absolute;
    border: 10px solid transparent;
    border-left-color: #EB9620;
    top: 50%;
    right: -19px;
    transform: translateY(-50%);
    z-index: 10;
}
/* .fixed_nav .login-social:hover .login-phone,
.fixed_nav .login-social:hover .login-qr-box{
    display: block;
    opacity: 1;
} */
.fixed_nav .login-qr .qr-title{
    font-size: 12px;
    color: #666;
    line-height: 20px
}
.login-qr .qq-btn button{
    width: 90%;
    margin-top: 20px;
    border-radius: 12px;
}
.backTop, .box {
    width: 25px;
    height: 50px;
}
</style>
